<!-- 首页 -->
<template>
  <div ref="workList" style="height: 100%">
    <div class="topTittle" @click="isOpen">
      <p>作业单</p>
      <!-- 展开 -->
      <el-icon v-if="isShow"><ArrowUpBold /></el-icon>
      <!-- 收起 -->
      <el-icon v-if="!isShow"><ArrowDownBold /></el-icon>
    </div>
    <div v-if="isShow" class="contentTop">
      <el-table
        ref="table"
        class="hd-table"
        :data="tableData"
        border
        :header-cell-style="{
          background: '#EEF5FF',
          textAlign: 'center',
          color: '#111',
          height: '68px',
        }"
      >
        <el-table-column prop="repair" label="维修项目" width="97px" />
        <el-table-column prop="planNum" label="日计划号" width="97px" />
        <el-table-column prop="planClassify" label="计划分类" width="97px" />
        <el-table-column prop="repairLevel" label="维修等级" width="97px">
          <template #default>
            <img src="@/assets/xinshuoImages/yellowRound.png" alt="" style="width: 12px; margin-right: 2px" />
            <span class="boldTxt">Ⅱ</span>
          </template>
        </el-table-column>
        <el-table-column prop="xianlu" label="线路" />
        <el-table-column prop="hangbie" label="行别" />
        <el-table-column prop="repairDate" label="维修日期" width="127px">
          <template #default>
            <p>2023年7月18日 一类天窗 8:00-12:00</p>
            <p class="grayTxt" style="color: #666">（共240分钟）</p>
          </template>
        </el-table-column>
        <el-table-column prop="loginAddress" label="登记地点" />
        <el-table-column prop="influenceRange" label="影响范围" width="98px" />
        <el-table-column prop="xiansu" label="限速及行车方式变化" width="106px" />
        <el-table-column prop="repairPeople" label="维修单位及负责人" />
        <el-table-column prop="hezuoPeople" label="配合单位及负责人" />
        <el-table-column prop="workPeople" label="作业人员" width="182px">
          <template #default>
            <div class="txtBox">
              <p class="boldTxt">驻站联络员</p>
              <p class="grayTxt">王五</p>
              <p class="boldTxt">现场防护员【1人】</p>
              <p class="grayTxt">赵六</p>
              <p class="boldTxt">信号工【4人】</p>
              <p class="grayTxt">孙七、周八、吴九、郑十</p>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 地图 -->
      <a :href="urls.getAssetsFile(`${imgUrl}`)" target="_blank" class="map">
        <img :src="urls.getAssetsFile(`${imgUrl}`)" alt="" class="mapImg" />
        <p class="txt">上行线13km+400m--17km+700m</p>
      </a>
    </div>
  </div>
  <!-- 步骤 -->
  <div style="overflow: hidden">
    <div class="steps">
      <div class="stepTitle">作业记录</div>
      <div class="section_title_wrap">
        <div class="section_title">
          <div
            v-for="(title, index) in contentList"
            :key="title"
            :class="['title_item', curTitleIndex === index ? 'active' : '']"
            @click="handleSkip(index)"
          >
            <span>
              {{ title.title }}
            </span>
          </div>
        </div>
      </div>
      <!-- <div style="height: 42px;"></div> -->
      <div ref="conRef" :style="getHeight()" class="preHeight">
        <div class="content_wrap">
          <div class="content">
            <div :ref="setItemRef">
              <PreMeeting />
            </div>
            <div :ref="setItemRef">
              <WorkReady :tool-arr="toolArr" :table-data="tableDataTab" :img-peoples="imgPeoples" />
            </div>
            <div :ref="setItemRef">
              <SetProtect :is-ganggui="false" :img-peoples="imgPeoples" />
            </div>
            <div :ref="setItemRef">
              <ConfirmProtect video-url="http://10.1.6.42:81/film/DconfirmProtect.mp4" />
            </div>
            <div :ref="setItemRef">
              <StartWork />
            </div>
            <div :ref="setItemRef">
              <FinishWork :table-tool="tableTool" video-url="http://10.1.6.42:81/film/Dfinish.mp4" />
            </div>
            <div :ref="setItemRef">
              <Conclude
                :img-peoples="imgPeoples"
                :down-list="downList"
                video-url="http://10.1.6.42:81/film/DpreAndConclude.mp4"
              />
            </div>
            <div class="lastHeight" :style="getHeight()"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { nextTick, reactive, ref, watch } from 'vue'
import PreMeeting from '../../components/DpreMeeting.vue'
import WorkReady from '../../components/workReady.vue'
import SetProtect from '../../components/setProtect.vue'
import ConfirmProtect from '../../components/confirmProtect.vue'
import StartWork from '../../components/DstartWork.vue'
import FinishWork from '../../components/finishWork.vue'
import Conclude from '../../components/conclude.vue'
import urls from '@/utils/url'

// 当前的标题active的index
const curTitleIndex = ref(0)
let contentList = ref([
  { title: '点前会' },
  { title: '作业前准备' },
  { title: '设置防护' },
  { title: '确认防护' },
  { title: '开展作业' },
  { title: '结束作业' },
  { title: '总结会' },
])
// 作业前准备
let toolArr = reactive({
  tool1: ['300mm活动扳手', '克丝钳', '8mm管拧', '10mm管拧', '插针', '150mm一/十字螺丝刀', '万用表', '对讲机', '安全带'],
  tool2: ['毛刷', '破布'],
})
let imgPeoples = reactive({
  // 登高作业前准备
  banner1: [
    {
      imgUrl: 'banshou.png',
      name: '300mm活动扳手',
    },
    {
      imgUrl: 'kesqian.png',
      name: '克丝钳',
    },
    {
      imgUrl: 'guanning.png',
      name: '8mm管拧',
    },
    {
      imgUrl: 'guanning2.png',
      name: '10mm管拧',
    },
  ],
  banner2: [
    {
      imgUrl: 'chazhen.png',
      name: '插针',
    },
    {
      imgUrl: 'shizidao.png',
      name: '150mm一/十字螺丝刀',
    },
    {
      imgUrl: 'wanyongbiao.png',
      name: '万用表',
    },
    {
      imgUrl: 'duijiangji.png',
      name: '对讲机',
    },
  ],
  banner3: [
    {
      imgUrl: 'safetyBelt.png',
      name: '安全带',
    },
    {
      imgUrl: 'banshou.png',
      name: '300mm活动扳手',
    },
    {
      imgUrl: 'kesqian.png',
      name: '克丝钳',
    },
    {
      imgUrl: 'guanning.png',
      name: '8mm管拧',
    },
  ],
  //   设置防护
  SetProtectBanner1: [
    {
      imgUrl: 'DsetProtect1.png',
      status: '工作服',
    },
    {
      imgUrl: 'DsetProtect2.png',
      status: '防护鞋',
    },
    {
      imgUrl: 'DsetProtect3.png',
      status: '防护手套',
    },
  ],
  SetProtectBanner2: [
    {
      imgUrl: 'DsetProtect4.png',
      status: '带反光条黄马甲',
    },
    {
      imgUrl: 'DsetProtect1.png',
      status: '工作服',
    },
    {
      imgUrl: 'DsetProtect2.png',
      status: '防护鞋',
    },
  ],
  //   总结会
  // 总结会轮播
  bannerConclude1: [
    {
      imgUrl: 'wangwu.png',
      name: '王五',
      bcgTitle: '驻站联络员',
    },
    {
      imgUrl: 'zhaoliu.png',
      name: '赵六',
      bcgTitle: '现场防护员',
    },
    {
      imgUrl: 'sunqi.png',
      name: '孙七',
      bcgTitle: '信号工',
    },
  ],
  bannerConclude2: [
    {
      imgUrl: 'wujiu.png',
      name: '吴九',
      bcgTitle: '信号工',
    },
    {
      imgUrl: 'zhengshi.png',
      name: '郑十',
      bcgTitle: '信号工',
    },
    {
      imgUrl: 'wangwu.png',
      name: '王五',
      bcgTitle: '驻站联络员',
    },
  ],
})

// 结束作业
const tableTool = reactive([
  { tool: '300mm活动扳手', status: '是' },
  { tool: '克丝钳', status: '是' },
  { tool: '10mm管拧', status: '是' },
  { tool: '8mm管拧', status: '是' },
  { tool: '插针', status: '是' },
  { tool: '万用表', status: '是' },
  { tool: '对讲机', status: '是' },
  { tool: '安全带', status: '是' },
  { tool: '150mm一/十字螺丝刀', status: '是' },
  { tool: '插针', status: '是' },
])
// 总结会下载
let downList = reactive([
  {
    confirm1: '已确认',
    confirm2: '上报日期：2023-07-25',
    txt1: '班组管理综合台账.docx',
    txt2: '确认人:张三丰',
    url: '/files/班组管理综合台账.pdf',
    wordUrl: '/files/班组管理综合台账.docx',
  },
  {
    confirm1: '已确认',
    confirm2: '上报日期：2023-07-25',
    txt1: '工器具出入库记录本.docx',
    txt2: '确认人:张三丰',
    url: '/files/工器具出入库记录本.pdf',
    wordUrl: '/files/工器具出入库记录本.docx',
  },
  {
    confirm1: '已确认',
    confirm2: '上报日期：2023-07-25',
    txt1: '材料消耗台账.docx',
    txt2: '确认人:张三丰',
    url: '/files/生产物资出入库记录本.pdf',
    wordUrl: '/files/生产物资出入库记录本.docx',
  },
  {
    confirm1: '已确认',
    confirm2: '上报日期：2023-07-25',
    txt1: '现场防护通话记录.docx',
    txt2: '确认人:张三丰',
    url: '/files/现场防护通话记录.pdf',
    wordUrl: '/files/现场防护通话记录.docx',
  },
  {
    confirm1: '已确认',
    confirm2: '上报日期：2023-07-25',
    txt1: '高柱信号机及表示器检修测试卡.docx',
    txt2: '确认人:张三丰',
    // url: '/files/钢轨重伤记录.pdf',
    // wordUrl: '/files/钢轨重伤记录.docx',
  },
])
const tableDataTab = [
  {
    use: '材料定额',
    dianpian: '15',
    jiaodian: '3',
    cost: '18',
  },
]
// 设置ref
const bodyHeight = ref(0)
let refList = reactive([])
const setItemRef = (el) => {
  if (el) {
    refList.push(el)
  }
}
let lastHeight = ref()
const init = () => {
  contentList.value.forEach((it, index) => {
    // 空盒子站位
    lastHeight.value = refList[6].clientHeight
    it.ref = `${it.key}-${index}`
    it.offsetTop = refList[index].offsetTop
  })
}

// 点击跳转

const handleSkip = (index) => {
  // 最后一个点击时不滚动
  if (index == 6) {
    tableScroll.value = false
  } else {
    tableScroll.value = true
  }
  clearInterval(timers) // 销毁定时器
  // bodyHeight.value = refList[index].offsetTop
  // 点击获取整个容器最新滚动距离
  // 加站位20到达下一级
  if (index == 0) {
    conRef.value.scrollTop = refList[index].offsetTop
  } else {
    conRef.value.scrollTop = refList[index].offsetTop + 20
  }

  if (refList[index]) {
    nextTick(() => {
      refList[index].scrollIntoView({
        behavior: 'smooth',
        block: 'end',
        inline: 'start',
      })
    })
  }
  // setTimeout(() => {
  //   scrollUp(conRef.value)
  // }, 300)

  curTitleIndex.value = index
}

// 监听scroll事件
const hadnleScroll = () => {
  bodyHeight.value = conRef.value.scrollTop
}
let conRef = ref('')
let tableScroll = ref(true)
let timers
const scrollUp = (tableRef) => {
  clearInterval(timers) // 销毁定时器
  timers = setInterval(() => {
    bodyHeight.value = tableRef.scrollTop
    if (tableScroll.value) {
      tableRef.scrollTop += 1
      if (tableRef.clientHeight + tableRef.scrollTop >= tableRef.scrollHeight) {
        tableRef.scrollTop = 0
      }
    }
  }, 90)
}
// 监听到滚动搞得的变化，做相应的调整
watch(bodyHeight, (val) => {
  const topList = contentList.value.map((it) => it.offsetTop)
  let index = topList.findIndex((it) => it > val) - 1
  if (index < -1) {
    index = contentList.value.length - 1
  }
  curTitleIndex.value = index
  if (curTitleIndex.value != 6) {
    tableScroll.value = true
  }
})

// 地图
let imgUrl = 'Dmap.png'
const tableData = [
  {
    repair: '检修通过信号机',
    planNum: 'X2040046',
    planClassify: '维修计划',
    xianlu: '准池线',
    hangbie: '站内',
    loginAddress: '八里铺站',
    influenceRange: '停用外西沟至八里铺区间上行线0122信号机至0172信号机之间的信号设备',
    xiansu: '无',
    repairPeople: '八里铺工电工区张三13947452522',
    hezuoPeople: '八里铺站李四13514777075',
  },
]
// 是否展示作业单
let isShow = ref(false)
// 72头，40上下padding
const isOpen = () => {
  isShow.value = !isShow.value
  if (isShow.value) {
    lastHeight.value = 200
    nextTick(() => {
      preHeight.value = window.innerHeight - workList.value.offsetHeight - 40 - 72
    })
  } else {
    lastHeight.value = refList[6].clientHeight
    nextTick(() => {
      preHeight.value = window.innerHeight - workList.value.offsetHeight - 40 - 72
    })
  }
}
// 作业单
let workList = ref('')
// 获取可视高度
const getHeight = () => {
  return {
    '--preHeight': `${preHeight.value}px`,
    '--lastHeight': `${lastHeight.value - 100}px`,
  }
}
// 作业记录高度
let preHeight = ref()
onMounted(() => {
  if (!isShow.value) {
    preHeight.value = window.innerHeight - workList.value.offsetHeight - 40 - 72
  }
  // 初始化tab标题
  init()
  conRef.value.addEventListener('scroll', hadnleScroll)
  // 自动计时滚动
  nextTick(() => {
    // scrollUp(conRef.value)
  })
})
onBeforeUnmount(() => {
  conRef.value.removeEventListener('scroll', hadnleScroll)
  clearInterval(timers) // 销毁定时器
})
</script>

<style lang="scss" scoped>
.topTittle {
  display: flex;
  align-items: center;
  background: #fff;
  height: 42px;
  font-size: 22px;
  font-family:
    Source Han Sans CN-Bold,
    Source Han Sans CN;
  font-weight: 700;
  color: #111111;
  padding-left: 20px;
  cursor: pointer;
  :deep(.el-icon) {
    color: #1d6be1;
    margin-left: 5px;
  }
}
.contentTop {
  background: #fff;
  width: 100%;
  padding: 10px 20px;
  display: flex;
  height: 304px;
  .boldTxt {
    font-weight: 700;
    color: #333;
  }
  :deep(.el-table) {
    font-size: 16px !important;
    flex: 1 1 0%;
    text-align: center;
    height: calc(217px + 68px);
  }
  :deep(.el-table td.el-table__cell div) {
    text-align: center;
    color: #333;
  }
  :deep(.el-table__body .el-table__row) {
    height: 217px;
  }
  .txtBox {
    text-align: left !important;
    margin-left: -4px;
    line-height: 23px;
  }
  // 地图
  .map {
    width: 284px;
    height: 284px;
    margin-left: 14px;
    display: inline-block;
    position: relative;
    .txt {
      width: 257px;
      height: 31px;
      position: absolute;
      background: url('@/assets/xinshuoImages/mapBcg.png') no-repeat center/100% 100%;
      top: 0;
      left: 0;
      font-size: 14px;
      font-family:
        Source Han Sans CN-Regular,
        Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      line-height: 31px;
      padding-left: 11px;
    }
    .mapImg {
      width: 100%;
      height: 100%;
      position: relative;
    }
    .mapPosition {
      position: absolute;
      top: 54%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.stepTitle {
  height: 32px;
  font-size: 22px;
  font-family:
    Source Han Sans CN-Bold,
    Source Han Sans CN;
  font-weight: 700;
  color: #111111;
  margin-bottom: 10px;
}
.steps {
  background: #fff;
  padding: 6px 20px;
  margin-top: 20px;
  :deep(.el-tabs__nav) {
    width: 100%;
    // justify-content: space-around;
  }
  :deep(.el-tabs__header) {
    margin: 0 !important;
  }
  // 选项卡
  :deep(.el-tabs__item) {
    margin: 0 30px;
    padding: 0;
  }
  :deep(.el-tabs__item.is-top:nth-child(2).is-active) {
    margin-left: -11px !important;
  }
  :deep(.el-tabs__item.is-active) {
    width: 126px;
    background: url('@/assets/xinshuoImages/tabsLogo.png') no-repeat center/100% 100%;
    color: #fff;
    margin-left: 0 !important;
  }
  :deep(.el-tabs__active-bar) {
    background: transparent !important;
  }
  :deep(.el-tabs__nav-wrap) {
    border-bottom: 1px solid #1d6be1;
  }
  // ------------- 标题 -------------------
  .section_title_wrap {
    width: 100%;
    border-bottom: 2px solid #1d6be1;
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    .section_title {
      @include common_align(flex-start);
      .title_item {
        width: 142px;
        height: 100%;
        text-align: center;
        line-height: 42px;
        margin: 0 30px;
        font-size: 16px;
        font-weight: 400;
        color: #111;
        cursor: pointer;
        // min-width: 145px;
        &:first-child {
          margin: 0;
          > span:nth-child(1) {
            margin-left: -28px;
          }
        }

        &.active {
          background: url('@/assets/xinshuoImages/tabsLogo.png') no-repeat center/100% 100%;
          color: #fff;
          position: relative;
          &::after {
            content: '';
            display: inline-block;
            width: 56px;
            height: 2px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            background: #1d6be1;
          }
        }
      }
    }
  }

  .content_wrap {
    width: 100%;
    position: relative;
    overflow: hidden;
    // 在这里调整contentTemp都居中，取消padding-left
    :deep(.wrap) {
      padding-left: 0;
    }
  }
}
.preHeight {
  height: var(--preHeight) !important;
  overflow-y: auto;
}
.lastHeight {
  height: var(--lastHeight);
}
// 作业前准备
:deep(.box .center .tools .one) {
  width: auto !important;
  padding: 0 30px;
}
</style>
